<template>
	<div class="box">			
		<div class="header">这是测试的</div>
		<Left :comments="comments" v-on:addComment="doSomething"/>
		<Right :comments="comments">
			<div slot="commentCount">共{{comments.length}}条评论</div>
		</Right>
	</div>
</template>
<script type="text/javascript">
	import Left from './components/Left'
	import Right from './components/Right'
	export default {
		components: {Right, Left},
		data () {
			return {
				comments: []
			}
		},
		mounted () {
			let localComents = window.localStorage.getItem('comments_key');
			localComents = localComents? JSON.parse(localComents): [];
			this.comments = localComents;
		},
		methods: {
			doSomething: function(comment) {
				this.comments.push(comment);
			}
		},
		watch: {
			comments: {
				deep: true,
     			handler: function(newV, oldV){
     				window.localStorage.setItem('comments_key', JSON.stringify(newV));
				}
			}
		}
	}
</script>
<style type="text/css">
	.box {
		width: 800px;
		margin: 0px auto;
	}
	.header{
		font-size: 30px;
		text-align: center;
		width: 100%;
	}
	.box > div{
		float: left
	}
</style>
